<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group title="品鉴卡列表">
        <van-swipe-cell v-for="item in cards" :key="item.id">
          <van-cell
            :key="item.id"
            :title="item.name"
            :label="item.comment"
            @click="onCellClick(item)"
            is-link
            center
          >
          </van-cell>
          <template #right>
            <van-button
              class="swipe-cell-button"
              square
              type="primary"
              text="修改"
              @click="onUpdate(item.id)"
            />
            <van-button
              class="swipe-cell-button"
              square
              type="danger"
              text="删除"
              @click="onDel(item.id)"
            />
          </template>
        </van-swipe-cell>
      </van-cell-group>
    </van-list>
    <van-action-sheet
      title="品鉴卡详情"
      v-model="actionShow"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    >
      <div class="content">
        <van-cell :title="card.name" >
          <template #label>
            <van-row>
              <van-col span="24">开始时间：{{ card.begin_date }}</van-col>
            </van-row>
            <van-row>
              <van-col span="24">结束时间：{{ card.end_date }}</van-col>
            </van-row>
            <van-row>
              <van-col span="24">品鉴说明：{{ card.comment }}</van-col>
            </van-row>
          </template>
        </van-cell>
        <van-image v-if="card.image" width="100%" height="200" :src="card.image" />
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { getWxCards, delWxCard, updateWxCard } from "@/api/card";

export default {
  name: "CardList",
  data() {
    return {
      title: this.$route.meta.title,

      cards: [],
      loading: false,
      finished: false,
      actionShow: false,
      card: {},

      listQuery: {
        page: 1,
        page_size: 10,
      },
    };
  },


  mounted() {},

  methods: {
    onLoad() {
      this.getCardList();
    },
    getCardList() {
      this.loading = true;
      getWxCards(this.listQuery)
        .then((res) => {
          if (res.data.results.length == 0) {
            this.cards = [];
            this.finished = true;
          }
          this.listQuery.page = res.data.page;
          this.loading = false;
          this.cards.push(...res.data.results);
          if (this.cards.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$toast("获取品鉴卡失败!");
        });
    },

    onCellClick(item) {
      this.$router.push({
        name: "Appraise",
        params: { card_id: item.id },
      });
      // this.card = item;
    },

    onCancel() {
      this.actionShow = false;
      this.card = {};
    },

    onUpdate(card_id) {
      this.$router.push({
        name: "CardImage",
        params: { card_id: card_id },
        query: { flag: 1 },
      });
    },

    onConfirmDelay() {
      const data = {
        id: this.employee_id,
        end_date: this.end_date,
      };
      updateWxCard(data).then((res) => {
        const index = this.cards.findIndex((v) => v.id == res.data.id);
        this.cards.splice(index, 1, res.data);
        this.$toast.success("操作成功");
      });
    },

    onDel(id) {
      this.$dialog
        .confirm({
          title: "删除确认",
          message: "真的要删除吗?",
        })
        .then(() => {
          // on confirm
          const params = {
            id: id,
          };
          delWxCard(params).then((res) => {
            if (res.status == 204) {
              const index = this.cards.findIndex((v) => v.id == id);
              this.cards.splice(index, 1);
              this.$toast("删除成功!");
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style scoped>
.content {
  margin: 5px;
}
.van-cell__label {
  font-size: 14px;
}
.van-row {
  padding: 10px 5px;
}
</style>